<template>
  <div class="inquiry-container">
    <div class="header">
      <h3>在线问诊</h3>
    </div>
    
    <div class="inquiry-form-card">
      <el-input
        v-model="consultationContent"
        :rows="5"
        type="textarea"
        placeholder="请输入您的健康咨询内容，例如：最近经常失眠，有什么中医调理的方法吗？"
      />
      <el-button type="primary" :loading="loading" @click="submitConsultation">
        提交问诊
      </el-button>
    </div>

    <div class="history-link">
      <el-button link type="primary" @click="goToHistory">查看历史问诊记录</el-button>
    </div>

    <!-- 医生回复区域（简化版，待后端对接后完善） -->
    <div class="doctor-reply-card" v-if="latestReply">
      <h4>医生回复</h4>
      <p>{{ latestReply.replyContent }}</p>
      <span class="reply-time">{{ latestReply.replyTime }}</span>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
// 假设的API函数，待实际对接后端
import { submitInquiryApi, getInquiryListApi, getInquiryDetailApi } from '../api/inquiry'

const router = useRouter()
const consultationContent = ref('')
const loading = ref(false)
const latestReply = ref(null)

const submitConsultation = async () => {
  if (!consultationContent.value.trim()) {
    ElMessage.warning('请输入咨询内容')
    return
  }

  loading.value = true
  try {
    const res = await submitInquiryApi({ content: consultationContent.value })
    if (res && res.data) {
      ElMessage.success('问诊提交成功，请等待医生回复')
      consultationContent.value = '' // 清空输入框
    } else {
      ElMessage.error(res.message || '问诊提交失败')
    }
  } catch (error) {
    console.error('提交问诊失败:', error)
    ElMessage.error('提交问诊失败，请重试')
  } finally {
    loading.value = false
  }
}

const goToHistory = () => {
  router.push('/inquiry/history')
}

// 可以在页面加载时尝试获取最新回复，如果需要的话
// onMounted(async () => {
//   try {
//     const res = await getLatestReplyApi();
//     if (res && res.data) {
//       latestReply.value = res.data;
//     }
//   } catch (error) {
//     console.error('获取最新回复失败:', error);
//   }
// });

</script>

<style scoped>
.inquiry-container {
  padding: 20px;
  background-color: #f7f8fa;
  min-height: calc(100vh - 50px);
  padding-bottom: 70px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.header h3 {
  font-size: 22px;
  color: #333;
}

.inquiry-form-card {
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.inquiry-form-card .el-textarea {
  margin-bottom: 15px;
}

.inquiry-form-card .el-button {
  width: 100%;
  background-color: #2e8b57; /* 深绿色 */
  border-color: #2e8b57;
  border-radius: 8px;
}

.history-link {
  text-align: center;
  margin-bottom: 20px;
}

.doctor-reply-card {
  background-color: #e6f7ff; /* 浅蓝色背景，表示回复 */
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  border-left: 5px solid #1890ff; /* 左侧蓝色边框 */
}

.doctor-reply-card h4 {
  margin-top: 0;
  color: #1890ff;
  font-size: 16px;
  margin-bottom: 10px;
}

.doctor-reply-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

.doctor-reply-card .reply-time {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}

/* 调整输入框圆角 */
:deep(.el-textarea__inner) {
  border-radius: 12px;
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-textarea__inner:focus) {
  box-shadow: 0 0 0 1px #2e8b57 inset;
}
</style> 